@charset "utf-8";
/* 头部 */
header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 98px;
	padding: 0 40px 0 47px;
	.logo {
		width: 69px;
		height: 65px;
		img {
			width: 100%;
		}
	}
	nav {
		display: flex;
		ul {
			display: flex;
			li {
				position: relative;
				display: flex;
				margin-left: 80px;
				a {
					text-align: center;
					h3 {
						font-size: 16px;
						color: #0d0d0d;
						transition: all .5s;
					}
					span {
						font-size: 14px;
						color: #838383;
						transition: all .5s;
					}
				}
				&:hover a h3, &:hover a span {
					color: #12b2a5;
				}
				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					background-color: #d6d6d6;
					transition: all 1s;
				}
				&::after {
					content: "";
					position: absolute;
					right: 0;
					top: 0;
					background-color: #d6d6d6;
					transition: all 1s;
				}
				&:hover::before {
					width: 1px;
					height: 40px;
					transform: translateY(-25px) rotate(35deg);
				}
				&:hover::after {
					width: 1px;
					height: 40px;
					transform: translateY(25px) rotate(35deg);
				}
			}
			.active {
				position: relative;
				a h3,a span {
					color: #12b2a5;
				}
				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					width: 1px;
					height: 40px;
					transform: translateY(-25px) rotate(35deg);
					background-color: #d6d6d6;
				}
				&::after {
					content: "";
					position: absolute;
					right: 0;
					top: 0;
					width: 1px;
					height: 40px;
					transform: translateY(25px) rotate(35deg);
					background-color: #d6d6d6;
				}
			}
		}
		.weixin {
			margin-left: 67px;
		}
	}
}
// 轮播
.swiper {
	width: 100%;
	height: 239px;
	img {
		// display: block;
		width: 100%;
		height: 100%;
	}
}
// 内容
.main {
	position: relative;
	.m_top {
		height: 66px;
		background-color: #0fc2c4;
		ul {
			width: 950px;
			margin: 0 auto;
			li {
				float: left;
				margin-left: -1px;
				a {
					display: table-cell;
					vertical-align: middle;
					height: 66px;
					padding: 0 39px;
					color: white;
					border-left: 1px solid #069ea0;
					border-right: 1px solid #069ea0;
					text-align: center;
					h4 {
						font-size: 16px;
					}
					p {
						margin-top: 5px;
						font-size: 10px;
					}
				}
				&:hover {
					background-color: #ffd203;
				}
			}
			.active {
				background-color: #ffd203;
			}
		}
	}
	// 主体
	.m_center {
		width: 780px;
		margin: 0 auto;
		&>img {
			position: absolute;
		}
		&>img:nth-child(1) {
			top: 50px;
			left: 67px;
			z-index: -1;
		}
		&>img:nth-child(2) {
			top: 340px;
			right: 0;
			width: 188px;
			height: 168px;
		}
		&>img:nth-child(3) {
			top: 1022px;
			left: 0;
			width: 176px;
			height: 171px;
		}
		.page_header {
			margin-top: 62px;
			text-align: center;
			span {
				display: inline-block;
				padding: 0 20px;
				height: 40px;
				line-height: 40px;
				border: 1px solid #8b9a99;
				border-radius: 40px;
				font-size: 13px;
				cursor: pointer;
				margin: 0 10px;
				&:hover {
					color: white;
					background-color: #11aea0;
				}
			}
			.active {
				color: white;
				background-color: #11aea0;
			}
		}
		.page_content {
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;
			li {
				margin-top: 80px;
				width: 246px;
				box-sizing: border-box;
				background-color: #eaeaea;
				.c_header {
					display: flex;
					flex-direction: column;
					padding: 0 20px;
					.c_title {
						display: flex;
						justify-content: space-between;
						margin-top: 18px;
						margin-bottom: 10px;
						h5 {
							font-size: 20px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						a {
							font-size: 11px;
							height: 24px;
							width: 48px;
							color: white;
							border-radius: 24px;
							line-height: 24px;
							background-color: #11ad9f;
							text-align: center;
							&:hover {
								color: black;
							}
						}
					}
					.date {
						display: flex;
						position: relative;
						justify-content: space-between;
						color: #737373;
						.date_left {
							p {
								font-size: 11px;
							}
						}
						.date_right {
							cursor: pointer;
							.iconfont {
								font-size: 30px;
							}
						}
						&::after {
							content: "";
							position: absolute;
							left: 0;
							bottom: -10px;
							width: 28px;
							height: 1px;
							background-color: #737373;
						}
					}
				}
				.c_img {
					margin-top: 30px;
					transition: all .5s;
					cursor: pointer;
					height: 282px;
					img {
						display: block;
						width: 100%;
					}
					&:hover {
						box-shadow: 5px 5px 5px rgba($color: #000000, $alpha: .7);
						transform: translateX(-5px);
					}
				}
				&:not(:nth-child(3n)) {
					margin-right: 20px;
				}
			}
		}
		.page_footer {
			margin-top: 70px;
			display: flex;
			justify-content: center;
			align-items: center;
			.prev, .next {
				width: 38px;
				height: 38px;
				border: 1px solid #8b9a99;
				border-radius: 50%;
				cursor: pointer;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30px;
				&:hover {
					color: white;
					background-color: #11ad9f;
					box-shadow: 5px 5px 5px rgba($color: #000000, $alpha: .5);
				}
			}
			.number {
				display: flex;
				border: 1px solid #8b9a99;
				height: 38px;
				line-height: 38px;
				margin: 0 20px;
				border-radius: 38px;
				cursor: pointer;
				padding: 0 20px;
				li {
					padding: 0 10px;
					font-weight: bold;
					&:hover {
						color: #11AD9F;
					}
				}
				.active {
					color: #11ad9f;
				}
			}
		}
	}
}
// 尾部
footer {
	position: relative;
	img {
		display: block;
		width: 100%;
	}
	p {
		position: absolute;
		left: 50%;
		top: 70%;
		transform: translateX(-50%);
		color: white;
		font-size: 12px;
	}
}